<template>
  <ul>
    <li
      v-for="(value, index) in list"
      :key="index"
      @click="handleClick(value)"
    >
      <!-- :to='"/music/"+`${value.songData.copyrightId || value.songData.contentId}`' -->
    
      <span v-if="sort" :class="{ active: index < 3 && isshow }" 
        >{{ index < 9 ? "0" + (index + 1) : index + 1 }}
      </span>
      <div class="left"  >
        <p class="p1">
          {{ value.songData.relationTitle }}
        </p>
        <p class="p2" >
          <i class="iconfont" v-if="isshow" >
            &#xe601;
          </i>
          {{ value.songData.singerName["0"] }}
        </p>
      </div>
      <div class="right" >
        <i class="iconfont" >&#xe67e;</i>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { get } from "../utils/http";
@Component
export default class MusicList extends Vue {
  $router
  @Prop(Array) public list?: object;
  @Prop(Boolean) public sort?: boolean;
  @Prop(Boolean) public isshow?: boolean;
  @Prop(String) public type?:string;
  id:number=0
  mounted() {
    // console.log(typeof this.type);
  }

  handleClick(value) {
    this.id = value.songData.copyrightId || value.songData.contentId
    this.$router.push({
      path:'/music',
      query:{
        id:this.id,
        type:this.type

      }
    })
  }
  beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}
}
</script>

<style lang="stylus" scoped>
@import '~@a/stylus/border.styl'
  ul
    overflow hidden
    width 100%
    li
      width 100%
      height .54rem
      padding .06rem 0 .06rem .1rem
      display flex
      flex-direction row
      border_1px(0 0 1px 0)
      span
        display block
        width .444rem
        color #999
        margin-left -.1rem
        font-size .1874rem
        text-align center
        line-height .4rem
      span.active
        color #df3436
      .left
        width 0
        flex 1
        .p1
          font-size .18rem
          height .24rem
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
          word-break: normal;
          line-height .24rem
          color #333
          margin  0
        .p2
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size .12rem
          height .17rem
          color #888
          line-height .17rem
          i
            line-height .17rem
            color #fe8456
      .right
        width .41rem
        height .5rem
        text-align center
        i
          font-size .2rem
          color #ccc

</style>
